<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>填写信息</title>
  <!--css代码声明-->
  <style type="text/css">
    #showdiv{
      width: 450px;
      height: 530px;
      border: solid 2px grey;
      border-radius: 10px;
      margin-top: 20px;
      margin-left: 350px;
    }
    table{
      margin: auto;
      color: white;
      font-family: "Consolas";
      margin-top: 20px;
    }
    span{
      font-size: 13px;
    }
    #codeSpan{
      font-size: 20px;
    }
    body{
      background: url(img/backgroud.jpg);
      background-repeat: no-repeat;
      background-size: cover;
    }
    tr{
      height: 35px;
    }
    td{

    }
    input[type=text]{
      border-radius: 10px;
    }
    input[type=password]{
      border-radius: 10px;
    }
    h3{
      color: white;
      font-family: "Brush Script MT";
      font-size: 30px;
    }
  </style>
  <!--js代码声明-->
  <script type="text/javascript">
    function creatCode(){
      //获得四位随机数
      var code=Math.floor(Math.random()*9000+1000);
      //获取span对象
      var span=document.getElementById("codeSpan");
      //把随机数赋值给span
      span.innerHTML=code;
    }
  </script>
</head>
<body onload="creatCode()">
<h3 align="center">
  <span style="color: orange;font-size: 30px;">个人主页信息</span>
</h3>
<div id="showdiv">
  <form action="#">
    <table>
      <tr >
        <td width="50px">Usename：</td>
        <td width="300px">
          <input type="text" name="uname" id="uname" value="" />
        </td>
      </tr>
      <tr >
        <td>Password：</td>
        <td >

          <input type="password" name="pwd" id="pwd" value="" />
        </td>
      </tr>
      <tr >
        <td>Confirm：</td>
        <td >

          <input type="password" name="confirm" id="confirm" value="" />
        </td>
      </tr>
      <tr >
        <td>Tel：</td>
        <td >

          <input type="text" name="num" id="num" value="" />
        </td>
      </tr>
      <tr >
        <td>E-Mail：</td>
        <td >

          <input type="text" name="mail" id="mail" value="" />
        </td>
      </tr>
      <tr>
        <td>Gender：</td>
        <td >

          F<input type="radio" name="sex" id="" value="1" checked="checked"/>
          M<input type="radio" name="sex" id="" value="0" />

        </td>
      </tr>
      <tr>
        <td>Native Place：</td>
        <td >

          <select name="address">
            <option value="0">--Choices--</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
            <option value="4">深圳</option>
            <option value="5">香港</option>
            <option value="5">长春</option>
            <option value="6">大连</option>
            <option value="7">哈尔滨</option>
            <option value="8">西安</option>
          </select>
        </td>
      </tr>
      <tr >
        <td>Hobby：</td>
        <td >

          <input type="checkbox" name="" id="" value="" />Game&nbsp;
          <input type="checkbox" name="" id="" value="" />Guitar
          <input type="checkbox" name="" id="" value="" />basketball
          <br />
          <input type="checkbox" name="" id="" value="" />Music
          <input type="checkbox" name="" id="" value="" />Movie&nbsp;
          <input type="checkbox" name="" id="" value="" />Running
        </td>
      </tr>
      <tr >
        <td>Self-introduction：</td>
        <td >

          <textarea name="intro" rows="5" cols="30"></textarea>
        </td>
      </tr>
      <tr >
        <td>Identtifying code：</td>
        <td >

          <input type="text" name="code" id="code" value="" />
          <span id="codeSpan" onclick="creatCode()" style="background: url(img/code.jpg.gif);color: black;"></span>
        </td>
      </tr>
    </table>
  </form>
</div>
</body>
</html>
